<!DOCTYPE html>
<html lang="zh-en">
<head>
	<meta charset="utf-8">
	<title>个人作品</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/media.css">
	<link rel="stylesheet" type="text/css" href="css/freeCode.css">
	<!-- <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> -->
</head>
<body>
	<div class="box">
	<header class="header">
				<a href="javascript:;">
					<img class="header__logo" src="img/qlip.png">
				</a>
				<nav class="header__nav">
					<a href="#screen-1" class="header__nav-item header__nav-item_status_active">ABOUT</a>
					<a href="#screen-2" class="header__nav-item header__nav-item_status_hover">PORTFOLIO</a>
					<a href="#screen-3" class="header__nav-item header__nav-item_status_hover">CONTACT</a>
				</nav>
	</header>
	<div class="container">
		<section id="screen-1">
				 <div class="screen-1__heading">
				 	Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
				 	<hr class="screen-1__text-line" />
				 	<b> Web Developer - User Experience Designer - Graphic Artist </b>
				 </div>
				 <div>
					<img src="img/avatar.jpg" class="screen-1__img">
				 </div>
			</section>

			<section id="screen-2">
				<h2 class="screen-2__heading">
					PORTFOLIO
				</h2>
				<hr class="screen-2__text-line" />
				<div class="screen-2__img">
				 	 <img src="img/YMCA-Realtor-Donation-3.jpg" class="screen-2__img-item">
				 	 <img src="img/webcaballero.jpg" class="screen-2__img-item">
				 	 <img src="img/webmarqas.jpg" class="screen-2__img-item">
				 	 <img src="img/webbrandaxis.jpg" class="screen-2__img-item">
				 	 <img src="img/panacea1.jpg" class="screen-2__img-item">
				 	 <img src="img/webgatomalo.jpg" class="screen-2__img-item">
				</div>
			</section>
			<section id="screen-3">
				<h2 class="screen-3__heading">
					CONTACT ME
				</h2>
				<hr class="screen-3__text-line" />
				<div class="screen-3__wrap">
					<form class="screen-3__from" novalidate>
						<div class="screen-3__form-item">
							<label for="name">Name</label>
							<input id="name" type="text" placeholder="Name" required>
						</div>
						<div class="screen-3__form-item">
							<label for="email">Email Address</label>
							<input id="email" type="text" placeholder="Email Address" required>
						</div>
						<div class="screen-3__form-item">
							<label for="phone">Phone Number</label>
							<input id="phone" type="text" placeholder="Phone Number" required>
						</div>
						<div class="screen-3__form-item">
							<label id="message-label" for="message">Message</label>
							<textarea id="message" rows="5" placeholder="Message" required></textarea>
						</div>
						
							<button class="screen-3__form-item-button" type="submit">Send</button>
						
					</form>
				
					<div class="screen-3__section">
						<p class="screen-3__section-item_1">
						   Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.
						</p>
						<p class="screen-3__section-item_2">
							I promise to reply A.S.A.P.
						</p>
						<p class="screen-3__section-item_3">
							Note: No spam/soliciting pour moi, merci :)
						</p>
					</div>
				</div>
			</section>
		</div>
	
			
		
	<footer>
		<div id="footer-above">
			<div>
				<h3>About this page</h3>
				<p>Made with  and <br> by <a href="javascript:;">Justin Sane</a>.</p>
			</div>
			<div>
				<h3>AROUND THE WEB</h3>
				<ul>
					<li>
						<a rel="nofollow" class="button social" href="https://www.linkedin.com/in/hallaathrad">
						<i class="fa fa-fw fa-linkedin"></i>
						</a>
					</li>
					<li>
						<a rel="nofollow" class="button social" href="https://github.com/hallaathrad">
						<i class="fa fa-fw fa-github"></i>
						</a>
					</li>
					<li>
						<a rel="nofollow" class="button social" href="https://twitter.com/hallaathrad">
						<i class="fa fa-fw fa-twitter"></i>
						</a>
					</li>
					<li>
						<a rel="nofollow" class="button social" href="https://www.flickr.com/photos/hallaathrad/" title="My Flickr">
						<i class="fa fa-fw fa-flickr"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="footer-below">
			qlip © 20172017. All Rights Reversed
		</div>
	</footer>
	</div>	
</body>
</html>